<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的Prop</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- Prop的数据传值 -->
    <!-- <div id="blog-post-demo">
        <blog-post title="My journey with Vue"></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>
        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
    </div> -->
    <div id="app">
        <!-- UserCard子组件，用户显示用户的名字 -->
        <user-card username="John Doe"></user-card>
    </div>
    <!-- 动态Props -->
    <div id="app1">
        <user-card :username="dynamicUsername"></user-card>
    </div>
    <!-- Prop验证 -->
    <div id="app3">
        <post :title="'中国'"></post>
    </div>
    <!-- 单向数据流 -->
    <div id="app4">
        <counter :count="count" @increment="incrementCount"></counter>
    </div>
    <!-- 自定义事件 -->
    <div id="app5">  
        <Buttons @custom-click="handleCustomClick"></Buttons>  
    </div>  
    <!-- 传递数据 -->
    <div id="app6">
        <counter @custom-increment="handleCustomIncrement"></counter>
        <p>计数: {{ count }}</p>
    </div>
    <!-- 命名自定义事件 -->
    <div id="app7">
        <product @add-to-cart="handleAddToCart"></product>
        <p>购物车中有{{ cartItems }}件商品</p>
    </div>
</body>
<script type="text/javascript">
    // const blogPost = Vue.component('blog-post',{
    //     props: ['title'],
    //     template: '<h3>{{ title }}</h3>'
    // });
    // new Vue({
    //     el: '#blog-post-demo',
    //     data: {
    //         posts: [
    //             { id: 1, title: 'My journey with Vue' },
    //             { id: 2, title: 'Blogging with Vue' },
    //             { id: 3, title: 'Why Vue is so fun' }
    //         ]
    //     }
    // })

    // 全局注册UserCard组件
    Vue.component('UserCard', {
        props: ['username'],    // 声明props
        template: `<div>{{ username }}</div>`
    });
    const app = new Vue({
        el: '#app'
    })
    // 动态props
    Vue.component('UserCard', {
        props: ['username'],
        template: `<div>{{ username }}</div>`
    });
    const app1 = new Vue({
        el: '#app1',
        data: {
            dynamicUsername: '闽西职业技术学院1'
        }
    });
    // Prop验证
    Vue.component('Post', {
        props: {
            title: {
                type: String, // 类型验证
                required: true // 必需属性
            }
        },
        template: `<div>{{ title }}</div>`
    });
    const app3 = new Vue({
        el: '#app3',
    })
    // 单向数据流
    Vue.component('Counter',{
        props: ['count'],
        template: `<div>
                <button @click="increment">+1</button>
                <span>计数：{{ count }}</span>
            </div>`,
            methods: {
                increment() {
                    this.$emit('increment'); //触发自定义事件
                }
            }
    });
    const app4 = new Vue({
        el: '#app4',
         data: {
            count: 0
         },
         methods: {
            incrementCount(){
                this.count++;
            }
        }
    });
    // 自定义事件(子组件)
    Vue.component('Buttons', {  
    template: `<button @click="handleClick">点我</button>`,  
    methods: {  
        handleClick() {  
            this.$emit('custom-click');  
        },  
    },  
});  
  
const app5 = new Vue({  
    el: '#app5',  
    methods: {  
        handleCustomClick() {  
            alert('自定义事件被触发了!')  
        },  
    },  
});  
Vue.component('Counter',{
    data() {
        return {
            count: 0
        };
    },
    template: `<div>
                <button @click="increment">+1</button>
              </div>`,
    methods: {
        increment() {
            this.count++;
            this.$emit('custom-increment', this.count); // 传递计数值
        },
    },
});
    const app6 = new Vue({
        el: '#app6',
        data: {
            count: 0
        },
        methods: {
            handleCustomIncrement(count) {
                alert(`计数增加到${count}`);
                this.count = count;
            }
        }
    });
    //  命名自定义事件
    Vue.component('Product',{
        template: `<button @click="addToCart">添加购物车</button>`,
        methods: {
            addToCart() {
                this.$emit('add-to-cart'); //触发命名自定义事件
            }
        }
    });
    const app7 = new Vue({
        el: '#app7',
        data: {
            cartItems: 0
        },
        methods: {
            handleAddToCart() {
                this.cartItems++;
            }
        }
    })
</script>    
</html>